<template>
  <div class="login-wrapper">
    <canvas id="dot">
      <p>your browser not support canvas</p>
    </canvas>
    <div class="login-box">
      <a-form :model="formData" :wrapper-col="{ span: 24 }" @submit="handleSubmit" @submit.prevent>
        <a-form-item>
          <a-input v-model:value="formData.user" placeholder="Username">
            <template #prefix>
              <UserOutlined style="color: rgba(0,0,0,.25)"/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="formData.password" type="password" placeholder="Password">
            <template #prefix>
              <LockOutlined style="color: rgba(0,0,0,.25)"/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            class="full-width"
            type="primary"
            html-type="submit"
            :disabled="isDisabled"
            :loading="loading"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  computed,
  ref,
  defineComponent,
  onBeforeUnmount,
  onMounted,
  getCurrentInstance,
  ComponentInternalInstance
} from 'vue'
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import Dot from '@/plugins/Dot'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { Book } from './interface'

export default defineComponent({
  name: 'Login',
  components: {
    UserOutlined,
    LockOutlined
  },
  setup () {
    const router = useRouter()
    const { globalProperties } = (getCurrentInstance() as ComponentInternalInstance).appContext.config
    console.log(getCurrentInstance(), 'getCurrentInstance')

    const formData = reactive({
      user: 'hello',
      password: 'world'
    }) as Book

    const loading = ref<boolean>(false)

    const isDisabled = computed(() => !formData.user || !formData.password)

    const handleSubmit = () => {
      sessionStorage.setItem('userName', formData.user)
      loading.value = true
      setTimeout(() => {
        loading.value = false

        globalProperties.$notification.success({
          message: '通知',
          description: '恭喜您，登录成功！'
        })
        router.replace({
          name: 'Home',
          query: {
            id: '666'
          }
        })
      }, 600)
    }

    const repaintDot = () => Dot('dot', {
      cW: document.documentElement.clientWidth,
      cH: document.documentElement.clientHeight
    })

    onMounted(() => {
      repaintDot()
      window.addEventListener('resize', repaintDot)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', repaintDot)
    })

    return {
      formData,
      isDisabled,
      loading,
      handleSubmit
    }
  },
  mounted () {
    console.log(this, 'line 110')
  }
})
</script>

<style scoped lang="less">
.prefix-color {
  color: rgba(0, 0, 0, .25)
}

.login-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;

  > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #91a0ff, #3d85f1);
  }

  .login-box {
    position: relative;
    z-index: 2;
    width: 600px;
    padding: 40px 60px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 6px;
    animation: Breathe 4s alternate infinite;
  }
}

@keyframes Breathe {
  from {
    box-shadow: 0 0 18px #fff;
  }
  to {
    box-shadow: 0 0 18px #717171;
  }
}
</style>
